<template>
  <div class="component need-footer">
    <app-header title="用户名列表" :needBack="true">
      <template slot="right-btn">
        <div class=""><i class="iconfont icon-bar"></i></div>
      </template>
    </app-header>
    <div style="width: 90%; margin: auto;">
      <ul class="brand-list">
        <li class="brand-item" @click="chooseBrand1">{{brand1}}</li>
        <li class="brand-item" @click="chooseBrand2">{{brand2}}</li>
      </ul>
      <model-muilt></model-muilt>
    </div>
    <app-footer :active="5"></app-footer>
    <div style="z-index: 3;">
      <popup v-model="show1" :popup-style="{zIndex: 999}">
        <div class="popup-modal">
            <group>
              <checklist :title="'请选择'" label-position="left" :options="brandList" v-model="brand1Arr" @on-change="change1"></checklist>
            </group>
        </div>
      </popup>
    </div>
    <group>
      <popup-picker title="选择下发部门：" :data="deptArr" v-model="dept" placeholder="请选择"></popup-picker>
    </group>
    <group>
      <popup-radio title="选择下发部门：" :options="deptArr2" v-model="dept2" placeholder="请选择"></popup-radio>
    </group>
    <br>
    <span @click="getList">获取</span>
    <span @click="changeList">改变</span>
    <select v-model="one">
      <option v-for="(item, index) in brandList" :value="item.key">{{item.value}}</option>
    </select>
  </div>
</template>

<script>
  import AppHeader from '@/components/common/AppHeader'
  import AppFooter from '@/components/common/AppFooter'
  import ModelMuilt from '@/components/common/ModelMuilt'
  import { Popup, Group, Checklist, PopupPicker, PopupRadio } from 'vux'
  const brandList = [
    { id: 1, value: '比亚迪', key: '101' },
    { id: 2, value: '传奇', key: '102' },
    { id: 3, value: '哈飞', key: '103' },
    { id: 4, value: '长城', key: '104' },
    { id: 5, value: '吉利', key: '105' },
    { id: 6, value: '长安', key: '106' },
  ]
  export default {
    data () {
      return {
        one: brandList[2].key,
        brand1: brandList[0].value,
        brand1Arr: [],
        brand2: brandList[1].value,
        brandList: brandList,
        show1: false,
        dept: [],
        deptArr: [['A', 'B']],
        dept2: '',
        deptArr2: [],
        i: 0
      }
    },
    methods: {
      chooseBrand1 () {
        this.show1 = true
      },
      chooseBrand2 () {

      },
      change1 (val, label) {
        console.log('change', val, label)
      },
      changeList () {
        this.deptArr2.push(this.i++)
      },
      getList () {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            this.deptArr2 = ['a', 'b', 'c']
          }, 100)
        })
      }
    },
    created() {
      //do something after creating vue instance
      this.getList()
      this.brandList = this.brandList.sort((a, b) => {
        return parseInt(a.key) - parseInt(b.key) < 0
      })
    },
    components: {
      AppHeader,
      AppFooter,
      Popup,
      Group,
      Checklist,
      ModelMuilt,
      PopupPicker,
      PopupRadio
    }
  }
</script>

<style lang="less" scoped>
  @import '../../assets/less/default.less';
  .brand-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    .brand-item {
      width: 100%;
      font-size: .3rem;
      line-height: .6rem;
      border-radius: 5px;
      border: 1px solid @border;
      text-align: center;
      margin-bottom: .2rem;
    }
  }
</style>
